<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
		<base href="<%=basePath%>"> 
		<link rel="stylesheet" type="text/css" href="<%=basePath%>js/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="<%=basePath%>js/themes/icon.css">
		<link rel="stylesheet" type="text/css" href="<%=basePath%>js/themes/color.css">
		<link rel="stylesheet" type="text/css" href="<%=basePath%>js/demo/demo.css">
		<script type="text/javascript" src="<%=basePath%>js/jquery.min.js"></script>
		<script type="text/javascript" src="<%=basePath%>js/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="<%=basePath%>js/easyui-lang-zh_CN.js"></script>								
     	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">		
		<title> 用户管理页  </title>	 
		<script type="text/javascript">
		        function startTime()  
				    {   
				        //获取当前系统日期  
				        var today=new Date();  
				        var h=today.getHours();  
				        var m=today.getMinutes();  
				        var s=today.getSeconds();  
				        //调用checkTime（）函数，小于十的数字前加0  
				        m=checkTime(m);  
				        s=checkTime(s);  
				        //s设置层txt的内容  
				        document.getElementById('time').innerHTML=h+":"+m+":"+s ; 
				        //过500毫秒再调用一次  
				        t=setTimeout('startTime()',500);  
				        //小于10，加0  
				        function checkTime(i)  
				        {  
				            if(i<10){
				                i="0" + i ;
				               }  
				               return i ;
				           }  
				     }
		</script>
		<style type="text/css">    
			 body{    
			      background-image: url(<%=basePath%>/img/blueworld.jpg);    			        
			 }
			 .time{
			       position:absolute; /*绝对定位*/ 			        
			       right:3%;
			 }
			 
			 .right0{
			        position:absolute; /*绝对定位*/ 
			        top:76%;
			        right:3%;
			 }
			 
			 .right1{
			        position:absolute; /*绝对定位*/ 
			        top:76%;
			        right:8%;
			 }
			 			 
	    </style>
	  
</head>
<body onload="startTime()">
    
    <center>
        <div class="easyui-panel"  style="width:1000px;height:600px;padding:8px;background-image: url(<%=basePath%>/img/blueworld.jpg);">
            <div class="easyui-layout" style="width:980px;height:580px;">
               
			<div id="mp" data-options="region:'north', iconCls:'icon-man'" title="管理员主页" style="width:99.9%;height:20%;">
			    
			     <a href="data/getAllUser" class="right1"><h2>刷新</h2></a>&nbsp;			 	   
			     <a href="Login/logout" class="right0"><h2>退出</h2></a>
			
			</div>
			
			<div id="nav" data-options="region:'west',iconCls:'icon-more'" title="导航菜单栏" style="width:15%;">
			    <div class="easyui-accordion" style="width:100%;height:99%;">
			       
			       <div title="主页" data-options="iconCls:'icon-man'" style="overflow:auto;">
			       
		                <ul class="easyui-tree">
						<li>
						<span>主页</span>							    																
								<ul><li><a ref="ref" href="#">主页</a></li></ul>																		
								<li>welcome.html</li>							
						</li>
	                    </ul>			       
			       </div>			    
			       <div title="用户管理" data-options="iconCls:'icon-tip'" style="overflow:auto;">			       			             
			             <ul class="easyui-tree">
			                 <li>
						        <span>用户管理</span>
						         <ul><li><a ref="userManager" href="#">用户管理</a></li></ul>
						     </li>
						 </ul>        			             
			       </div>			       
			       
			       <div title="帮助" data-options="iconCls:'icon-help'" style="overflow:auto;">			       			       
			             <ul class="easyui-tree">
						     <li><a ref="help" href="#">帮助</a></li>
						 </ul>			       
			       </div>

			    </div>
			  </div> 
			
		 <div data-options="region:'center'"> 
		 <div title="tt" id="tdg" class="easyui-tabs"> 
						
			<div id="userManager" name="userManager" title="用户管理" style="padding:10px" data-options="iconCls:'icon-tip'">
			    <table id="dg" class="easyui-datagrid"></table>
			    
			</div>					
						
			<div id="page" name="page" title="主页" style="padding:10px" data-options="iconCls:'icon-man'">
			    		    		    
		    </div> 
			
			<div id="help" name="help" title="帮助" style="padding:10px" data-options="iconCls:'icon-help'">
			     <ul class="easyui-tree" data-options=" "></ul>
		    </div>
		    
		  </div>
		      <div id="time" class="time" ></div>
	      </div>
		   
	   </div>
	     	 
	</div>   
	 <!--  编辑工具栏      --> 
	 <div id="toolbar">
	 
	        <!-- 条件查询   -->
	        <div id="tb"  style="padding:3px">
			<span>ID:</span>
			<input id="id" style="line-height:18px;border:1px solid #ccc">
			<span>用户名:</span>
			<input id="username" style="line-height:18px;border:1px solid #ccc">
			
			<a href="javascript:void(0)" class="easyui-linkbutton" onclick="doSearch()">搜索</a>
	        </div> 
	         
	        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="addUser()">添加</a>
	        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="editUser()">编辑</a>
	        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove'" onclick="delUser()">删除</a>	        
	        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-reload'" onclick="reLoad()">刷新</a>
	        
	        	   	   
      </div>
	  
	  
	<!--  新增/编辑用户弹出框     -->
	<div id="dlg" class="easyui-dialog" title="添加（编辑） 用户信息" data-options="iconCls:'icon-add'" closed="true" style="width:350px;height:520px;padding:30px 60px;" buttons="#dlg-buttons">		  
		  <form id="fm" name="fm" method="post" >      
		    <table id="tb" name="tb" cellpadding="5">
		    	       
		       <div style="margin-bottom:20px">
		           <label class="label-top">用户名:</label>
		           <input name="username" class="easyui-textbox" required="true" style="width:230px;height:28px"/>
		       </div>     
		       <div style="margin-bottom:20px">    
		           <label class="label-top">密码:</label>
		           <input name="password" class="easyui-textbox" required="true" style="width:230px;height:28px"/>
		       </div>
		       <div style="margin-bottom:20px">
		           <label class="label-top">性别:</label>
		           <input name="sex" class="easyui-textbox" style="width:230px;height:28px"/>
		       </div>
		       <div style="margin-bottom:20px">
		           <label class="label-top">邮箱:</label>
		           <input name="email" class="easyui-textbox" data-options="validType:'email'" style="width:230px;height:28px"/>
		       </div> 
		       <div style="margin-bottom:20px">
		           <label class="label-top">地址:</label>
		           <input name="address" class="easyui-textbox" style="width:230px;height:28px"/>
		       </div>
		       <div style="margin-bottom:20px">
		           <label class="label-top">用户类型:</label><br>
		           <select name="usertype" class="easyui-combobox" style="width:230px;height:28px">      
		           <option value="null"> </option>
		           <option value="manager">manager</option>
		           <option value="user">user</option>
		           </select>
		       </div>     
		     	     		     
		   </table>
	   </form> 
    </div> 
   
    <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton"  data-options="iconCls:'icon-ok'" onclick="saveUser()">确定</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="javascript:$('#dlg').dialog('close');">取消</a>
    </div>
         
    <script type="text/javascript">     
         
         $(function(){
            
           datagrid = $('#dg').datagrid({
           
           url:"data/getUserByPage",	         	           
	                        			   	           
	       columns:[[	          			          
			          { field:'ck',checkbox:true}, 
			                  
		              { field:'id', title:'ID', width:'70',align:'center'},
					  
		              { field:'username', title:'用户名', width:'100',align:'center'},
		              
		              { field:'password', title:'密码', width:'100',align:'center'},
		              
		              { field:'sex', title:'性别', width:'70',align:'center'},
		              
		              { field:'email', title:'邮箱', width:'160',align:'center'},
		              
		              { field:'address', title:'地址', width:'160',align:'center'},
		              
		              { field:'usertype', title:'用户类型', width:'78',align:'center'}, 
			       ]],	          			           
		               method:"post",
		               toolbar:'#toolbar',	          
			           rownumbers:true,
					   singleSelect:true,
					   autoRowHeight:false,
					   collapsible:true,
					   striped:true, //隔行变色
				       pagination:true,					   
					   pageSize:8,
					   pageList:[5,8,10,15,20],  
		               width:800,
		               height:388,		               	           		             		             	          		             		               	                            	           
	              });         	         
	        });
	       
	       	      	
       	   //管理用户信息
           var url;
           var type;
            
                        		       	
           //添加新用户
       	   function addUser() {
               $('#dlg').dialog('open').dialog('setTitle', 'New User'); 
               $('#fm').form('clear');
               url = "data/addUser";
              /*  document.getElementById('hidtype').value="submit";   */          
           }
       	    
       	          	        	          
           //编辑用户信息
           function editUser() {
           var rows = $('#dg').datagrid('getSelected');
           if (rows) {
               $('#dlg').dialog('open').dialog('setTitle', 'Edit User');
               $('#fm').form('load', rows);
               url = "data/updateUser?id=" + rows.id;
              }
           }
         
             
          //保存用户信息           
	      function saveUser(){
		  $('#fm').form('submit',{
			  url: url,
			  onSubmit: function(){
				return $(this).form('validate');
			},
			  success: function(result){
				  /* var result = eval('(' + result + ')'); */
				  if (result == 1){
				        $('#dlg').dialog('close');		// close the dialog
						$('#dg').datagrid('reload');	// reload the user data
				  } else {						
				          $.messager.show({
						  title: 'Error',
						  msg: "用户名已经被使用！",
					     });
				      }
			       }
		       });
	       }
        
                       
          //删除用户
          function delUser() {
              var row = $('#dg').datagrid('getSelected');               
              if (row) {
                 $.messager.confirm('提示', '确定删除该用户信息吗？', function (res) {
                 if (res) {
                            $.post("data/delUser", { id:row.id }, function (result) {
                      if (result == 1) { 
                             $('#dg').datagrid('reload');  // reload the user data  
                     
                       } else {
                                $.messager.show({   // show error message  
                                title:'Error',
                                msg: "删除失败！",
                            });
                         }
                      }, 'json');
                    }
                 });
              }
           }  
        
       
          //查找用户信息
          function doSearch(){
	        	         
		     $('#dg').datagrid('load',{
		                 
                 id: $('#id').val(),	                
                 username: $('#username').val()		              
		     }); 
		   }  
               
                                            
         //刷新页面
         function reLoad() {
             $('#dg').datagrid('reload');
         }
         
            
         //自定义分页      
         $(function(){
			  var pager = $('#dg').datagrid().datagrid('getPager');
			  pager.pagination({
			 	 pageSize:8,//每页显示的记录条数 		         
		         beforePageText: '第',//页数文本框前显示的汉字  
		         afterPageText: '页    共 {pages} 页',  
		         displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录' , 	
			 });			
		 });
		   
     </script> 
    </center> 
       
</body>
</html>
	   	 